<template>
  <div>

    <van-nav-bar title="我的订单"
                 left-text="返回"
                 left-arrow
                 @click-left="onClickLeft" />
    <van-tabs v-model:active="active"
              @click-tab="onTab">
      <van-tab v-for="item of tarList"
               :title="item.title"
               :name="item.name"
               :key="item.name"></van-tab>
      <div class="list">
        <div class="item"
             v-for="item of OrderData"
             :key="item.id">
          <div class="header">
            <div class="top">订单号：<span>{{item.code}}</span></div>
            <div class="status">{{item.status_text}}</div>
          </div>
          <div class="product"
               v-for="val of item.OrderProduct"
               :key="val.id">
            <van-card :num="val.nums"
                      :price="val.total"
                      :desc="'商品单价'+val.price"
                      :title="val.product.name"
                      :thumb="val.product.cover_cdn">
            </van-card>
          </div>
          <div class="footer">
            <div class="date">{{item.createtime}}</div>
            <div class="btn">
              <van-button type="primary"
                          size="mini"
                          color="#7232dd"
                          :to="{path:'/order/order/info',query:{orderid:item.id}}">订单详情</van-button>
              <van-button type="primary"
                          size="mini"
                          v-if="item.status >= 1 && item.status <= 4">申请售后</van-button>
              <van-button type="primary"
                          size="mini"
                          v-if="(item.status >= 2 && item.status <= 4) || item.status < 0">查看物流</van-button>
              <van-button type="primary"
                          size="mini"
                          v-if="item.status == 2 ">确认收货</van-button>
              <van-button type="primary"
                          size="mini"
                          v-if="item.status == 3">立即评价</van-button>
              <van-button type="danger"
                          size="mini"
                          v-if="item.status >= 3">删除订单</van-button>
            </div>
          </div>
        </div>
      </div>
    </van-tabs>
  </div>
</template>
<script>
export default {
  created() {
    this.OrderList()
  },
  data() {
    return {
      LoginUser: this.$cookies.get('LoginUser'),
      active: '0',
      OrderData: [],
      status: 0,
      tarList: [
        {
          title: '全部',
          name: 0,
        },
        {
          title: '已支付',
          name: 1,
        },
        {
          title: '已发货',
          name: 2,
        },
        {
          title: '已收货',
          name: 3,
        },
        {
          title: '已评价',
          name: 4,
        },
        {
          title: '申请退货',
          name: -2,
        },
        {
          title: '已退货',
          name: -1,
        },
        {
          title: '退货被拒',
          name: -3,
        },
      ],
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push('/user/base/index')
    },
    async OrderList() {
      let data = {
        userid: this.LoginUser.id,
        status: this.status,
      }
      let result = await this.$api.OrderIndex(data)

      if (result.code === 1) {
        this.OrderData = result.data
      }
    },
    onTab(item) {
      this.status = item.name
      this.OrderList()
    },
  },
}
</script>

<style>
.list .item {
  width: 95%;
  background: #f7f8fa;
  margin: 1em auto;
  color: #323233;
  padding-top: 1px;
  padding-bottom: 1px;
  box-sizing: border-box;
}

.item .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.item .header .status {
  margin: 10px 5px 5px 0;
}

.list .item .top {
  margin: 10px 0 5px 5px;
}

.item .top span {
  font-weight: bold;
  font-size: 15px;
}

.item .footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.item .footer .date {
  font-weight: bold;
}
</style>